<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogFlag"
      class="custom-dialog"
      width="50%"
      @close="cancel"
    >
      <div style="margin: 20px">
        <div style="margin: 10px 20px">
          <el-form :rules="rules" ref="ruleForm" :inline="true" :model="dataForm" label-width="100px"
                   class="product-form">
            <el-row>
              <el-col :span="12">
              </el-col>
            </el-row>
            <el-row v-if="!selectProcessingOnly">
              <el-col :span="24" v-if="conditionReadOnly">
                <el-form-item label="参数:" prop="ruleThreshold">
                  <el-input v-model="dataForm.ruleThreshold" size="small" style="width: 100%;"
                            placeholder="请输入参数" @change="getRuleExpression"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="!conditionReadOnly">
                <el-form-item label="参数11111:" prop="ruleThreshold1">
                  <el-input v-model="dataForm.ruleThreshold1" size="small" style="width: 100%;"
                            placeholder="请输入参数1" @change="getRuleExpressionData"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="!conditionReadOnly">
                <el-form-item label="参数2:" prop="ruleThreshold2">
                  <el-input v-model="dataForm.ruleThreshold2" size="small" style="width: 100%;"
                            placeholder="请输入参数2" @change="getRuleExpressionData"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="selectProcessingOnly">
              <el-col :span="24" v-if="conditionReadOnly">
                <el-form-item label="参数:" prop="ruleThreshold">
                  <el-input-number v-model="dataForm.ruleThreshold" size="small" style="width: 100%;"
                                   placeholder="请输入参数"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="!conditionReadOnly">
                <el-form-item label="参数12222:" prop="ruleThreshold1">
                  <el-input-number v-model="dataForm.ruleThreshold1" size="small" style="width: 100%;"
                                   placeholder="请输入参数1"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="!conditionReadOnly">
                <el-form-item label="参数2:" prop="mark">
                  <el-input-number v-model="dataForm.ruleThreshold2" size="small" style="width: 100%;"
                                   placeholder="请输入参数2"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="规则表达式:">
                  <el-input v-model="ruleExpression" size="small" style="width: 100%;"
                            :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="dialog-footer">
          <el-button @click="headCancel">取 消</el-button>
          <el-button type="primary" @click="determine">确 定
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "actionSelect",
  data() {
    return {
      pointName: '',
      title: '规则配置',
      dialogFlag: false,
      selectionList: [],
      actionData: [],
      activeTab: 'point',
      type: 'view',
      dataForm: {
        ruleName: '',
        ruleType: '',
        processingType: '',
        conditionType: '',
        ruleThreshold: '',
        ruleThreshold1: '',
        ruleThreshold2: '',
      },
      readOnly: true,
      processingOnly: true,
      selectProcessingOnly: false,
      conditionReadOnly: true,
      ruleTypeOptions: [],
      ruleConditionTypeOptions: [],
      computeTypeOptions: [],
      processingTypeOptions: [],
      rules: {
        ruleType: [
          {
            required: true,
            message: '请选择规则类型',
            trigger: 'blur'
          }
        ],
        processingType: [
          {
            required: true,
            message: '请选择处理类型',
            trigger: 'blur'
          }
        ],
        conditionType: [
          {
            required: true,
            message: '请选择条件类型',
            trigger: 'blur'
          }
        ],
        ruleThreshold: [
          {
            required: true,
            message: '请输入参数',
            trigger: 'blur'
          }
        ],
        ruleThreshold1: [
          {
            required: true,
            message: '请输入参数1',
            trigger: 'blur'
          }
        ],
        ruleThreshold2: [
          {
            required: true,
            message: '请输入参数2',
            trigger: 'blur'
          }
        ],
      },
    }
  },
  computed: {
    ruleExpression() {
      if (this.dataForm.processingType != 'string') {
        this.dataForm.ruleThreshold = Number(this.dataForm.ruleThreshold);
        this.dataForm.ruleThreshold1 = Number(this.dataForm.ruleThreshold1);
        this.dataForm.ruleThreshold2 = Number(this.dataForm.ruleThreshold2);
        const {ruleThreshold1, ruleThreshold2} = this.dataForm;
        if (ruleThreshold1 && ruleThreshold2) {
          if (ruleThreshold1 > ruleThreshold2) {
            this.$message.warning("参数有误请重新填写！");
            return '';
          }
        }
      }
      if (this.conditionReadOnly) {
        const {conditionType, ruleThreshold, timeType, timeValue, computeType} = this.dataForm;
        let conditionTypeValue = '';
        let timeTypeValue = '';
        let computeTypeValue = '';
        if (timeType == 0) {
          if (conditionType && ruleThreshold && computeType) {
            const foundItem = this.ruleConditionTypeOptions.find(item => item.value == conditionType);
            conditionTypeValue = foundItem.label;
            const computeItem = this.computeTypeOptions.find(item => item.value == computeType);
            computeTypeValue = computeItem.label;
            this.dataForm.ruleExpression = `${computeTypeValue}${conditionTypeValue}${ruleThreshold}`;
            return `${computeTypeValue}${conditionTypeValue}${ruleThreshold}`;
          } else {
            return '';
          }
        } else {
          if (conditionType && ruleThreshold && timeValue && computeType) {
            const foundItem = this.ruleConditionTypeOptions.find(item => item.value == conditionType);
            const timeItem = this.timeTypeOptions.find(item => item.value == timeType);
            const computeItem = this.computeTypeOptions.find(item => item.value == computeType);
            conditionTypeValue = foundItem.label;
            timeTypeValue = timeItem.label;
            computeTypeValue = computeItem.label;
            this.dataForm.ruleExpression = `${timeValue}${timeTypeValue}内${computeTypeValue}${conditionTypeValue}${ruleThreshold}`;
            return `${timeValue}${timeTypeValue}内${computeTypeValue}${conditionTypeValue}${ruleThreshold}`;
          } else {
            return '';
          }
        }
      } else {
        const {conditionType, ruleThreshold1, ruleThreshold2, timeType, timeValue, computeType} = this.dataForm;
        if (timeType == 0) {
          if (conditionType && ruleThreshold1 && ruleThreshold2 && computeType) {
            let ruleThreshold = `${ruleThreshold1}~${ruleThreshold2}`;
            let link = '';
            let conditionTypeValue = '';
            let delimiter = '...';
            let computeTypeValue = '';
            this.dataForm.ruleThreshold = ruleThreshold;

            const foundItem = this.ruleConditionTypeOptions.find(item => item.value == conditionType);
            const computeItem = this.computeTypeOptions.find(item => item.value == computeType);
            computeTypeValue = computeItem.label;
            if (foundItem) {
              let value = foundItem.label;
              let delimiterIndex = value.indexOf(delimiter);
              if (delimiterIndex !== -1) {
                link = value.substring(0, delimiterIndex);
                conditionTypeValue = value.substring(delimiterIndex + delimiter.length);
              }
            }
            this.dataForm.ruleExpression = `${computeTypeValue}${link}${ruleThreshold}${conditionTypeValue}`;
            return `${computeTypeValue}${link}${ruleThreshold}${conditionTypeValue}`;
          } else {
            return '';
          }
        } else {
          if (conditionType && ruleThreshold1 && ruleThreshold2 && timeValue && computeType) {
            let ruleThreshold = `${ruleThreshold1}~${ruleThreshold2}`;
            let link = '';
            let conditionTypeValue = '';
            let delimiter = '...';
            let timeTypeValue = '';
            let computeTypeValue = '';
            this.dataForm.ruleThreshold = ruleThreshold;
            const timeItem = this.timeTypeOptions.find(item => item.value == timeType);
            timeTypeValue = timeItem.label;
            const computeItem = this.computeTypeOptions.find(item => item.value == computeType);
            computeTypeValue = computeItem.label;

            const foundItem = this.ruleConditionTypeOptions.find(item => item.value == conditionType);
            if (foundItem) {
              let value = foundItem.label;
              let delimiterIndex = value.indexOf(delimiter);
              if (delimiterIndex !== -1) {
                link = value.substring(0, delimiterIndex);
                conditionTypeValue = value.substring(delimiterIndex + delimiter.length);
              }
            }
            this.dataForm.ruleExpression = `${timeValue}${timeTypeValue}内${computeTypeValue}${link}${ruleThreshold}${conditionTypeValue}`;
            return `${timeValue}${timeTypeValue}内${computeTypeValue}${link}${ruleThreshold}${conditionTypeValue}`;
          } else {
            return '';
          }
        }
      }
    },
  },
  created() {
    this.ruleTypeOptions = this.$store.state.dict.dictDatas.rule_type
    this.computeTypeOptions = this.$store.state.dict.dictDatas.compute_type
    this.processingTypeOptions = this.$store.state.dict.dictDatas.processing_type
    this.timeTypeOptions = this.$store.state.dict.dictDatas.time_type
  },
  mounted() {
    this.ruleTypeOptions = this.$store.state.dict.dictDatas.rule_type
  },
  methods: {

    getRuleExpression() {
      let conditionTypeValue = '';
      const {conditionType, ruleThreshold} = this.dataForm;
      const foundItem = this.ruleConditionTypeOptions.find(item => item.value == conditionType);
      conditionTypeValue = foundItem.label;
      this.dataForm.ruleExpression =`${conditionTypeValue}${ruleThreshold}`;
    },
    getRuleExpressionData() {
      if (this.dataForm.processingType != 'string') {
        this.dataForm.ruleThreshold = Number(this.dataForm.ruleThreshold);
        this.dataForm.ruleThreshold1 = Number(this.dataForm.ruleThreshold1);
        this.dataForm.ruleThreshold2 = Number(this.dataForm.ruleThreshold2);
        const {ruleThreshold1, ruleThreshold2} = this.dataForm;
        if (ruleThreshold1 && ruleThreshold2) {
          if (ruleThreshold1 > ruleThreshold2) {
            this.$message.warning("参数有误请重新填写！");
            this.dataForm.ruleExpression = '';
          }
        }
      }
      if (this.conditionReadOnly) {
        const {conditionType, ruleThreshold} = this.dataForm;
        let conditionTypeValue = '';
        if (conditionType && ruleThreshold) {
          const foundItem = this.ruleConditionTypeOptions.find(item => item.value == conditionType);
          conditionTypeValue = foundItem.label;
          this.dataForm.ruleExpression = `${conditionTypeValue}${ruleThreshold}`;
        } else {
          this.dataForm.ruleExpression = '';
        }
      } else {
        const {conditionType, ruleThreshold1, ruleThreshold2} = this.dataForm;
        if (conditionType && ruleThreshold1 && ruleThreshold2) {
          let ruleThreshold = `${ruleThreshold1}~${ruleThreshold2}`;
          let link = '';
          let conditionTypeValue = '';
          let delimiter = '...';
          this.dataForm.ruleThreshold = ruleThreshold;

          const foundItem = this.ruleConditionTypeOptions.find(item => item.value == conditionType);
          if (foundItem) {
            let value = foundItem.label;
            let delimiterIndex = value.indexOf(delimiter);
            if (delimiterIndex !== -1) {
              link = value.substring(0, delimiterIndex);
              conditionTypeValue = value.substring(delimiterIndex + delimiter.length);
            }
          }
          this.dataForm.ruleExpression = `${link}${ruleThreshold}${conditionTypeValue}`;
        } else {
          this.dataForm.ruleExpression = '';
        }
      }
    },
    selectRuleConditionType() {
      let type = ['7', '8', '9', '10']
      this.conditionReadOnly = !type.includes(this.dataForm.conditionType.toString());
      if (this.conditionReadOnly) {
        this.dataForm.ruleThreshold1 = ''
        this.dataForm.ruleThreshold2 = ''
        this.dataForm.ruleThreshold = Number(this.dataForm.ruleThreshold)
        this.getRuleExpression();
      } else {
        this.dataForm.getRuleExpressionData()
      }
    },
    selectRuleType() {
      if (this.dataForm.processingType != 'string') {
        this.selectProcessingOnly = true
        this.ruleConditionTypeOptions = this.$store.state.dict.dictDatas.rule_condition_type
      } else {
        this.selectProcessingOnly = false
        this.ruleConditionTypeOptions = this.$store.state.dict.dictDatas.rule_condition_type_string
      }
    },
    headCancel() {
      this.dialogFlag = false
    },
    selectable(row) {
      return !this.actionData.some(item => item.id === row.id)
    },
    init(data, ruleData) {
      this.pointName = data.pointName
      this.dataForm = ruleData
      this.dialogFlag = true
      if (this.dataForm.processingType != 'string') {
        this.ruleConditionTypeOptions = this.$store.state.dict.dictDatas.rule_condition_type
        this.selectProcessingOnly = true;
        let type = ['7', '8', '9', '10']
        if (type.includes(this.dataForm.conditionType.toString())) {
          this.conditionReadOnly = false;
          let index = "~";
          let delimiterIndex = this.dataForm.ruleThreshold.indexOf(index)
          if (delimiterIndex !== -1) {
            let ruleThreshold1 = this.dataForm.ruleThreshold.substring(0, delimiterIndex) * 1;
            let ruleThreshold2 = this.dataForm.ruleThreshold.substring(delimiterIndex + index.length) * 1;
            this.$set(this.dataForm, 'ruleThreshold1', ruleThreshold1)
            this.$set(this.dataForm, 'ruleThreshold2', ruleThreshold2)
          }
        } else {
          this.dataForm.ruleThreshold = this.dataForm.ruleThreshold * 1;
        }
      } else {
        this.ruleConditionTypeOptions = this.$store.state.dict.dictDatas.rule_condition_type_string
        this.selectProcessingOnly = false;
        let type = ['7', '8', '9', '10']
        if (type.includes(this.dataForm.conditionType.toString())) {
          this.conditionReadOnly = false;
        }
      }
      this.selectRuleType()
    },

    handleSelectionChange(selection) {
      this.selectionList = selection
    },
    indexMethod(index) {
      return index + 1
    },
    // 确认按钮
    determine() {
      this.$emit("ruleCondition", this.dataForm)
      this.cancel()
    },
    cancel() {
      this.dialogFlag = false
      this.readOnly = true
      this.processingOnly = true
      this.selectProcessingOnly = false
      this.conditionReadOnly = true
      this.dataForm = {}
    },
  }
}
</script>

<style scoped>
.product-form ::v-deep .el-form-item__label {
  color: #3f4448;
  font-weight: 400;
}

.product-form ::v-deep .el-textarea__inner {
  resize: none;
  min-height: 111.6px !important;
}

.product-form ::v-deep .el-form-item {
  width: 100%;
}

.product-form ::v-deep .el-form-item__content {
  width: calc(100% - 100px);
}

.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 12px 0;
  border-top: 1px solid rgb(204, 204, 204);
}

.custom-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh; /* 或者根据需要设置一个固定的高度 */
}
</style>
